<template>
  <Form
    :model="formState"
    layout="horizontal"
    autocomplete="off"
    class="flex flex-col"
  >
    <FormItem label="告警项" class="flex">
      <Input :value="name" :disabled="true" style="width: 200px" />
    </FormItem>
    <FormItem
      label="阈值规则"
      class="flex"
      name="username"
      :rules="[{ required: true, message: '' }]"
    >
      <FormItemRest>
        <Row>
          <Flex>
            <Col :span="6">
              <FormItem
                class="mr-2 flex"
                name="cpuSymbol"
                :rules="[{ required: true, message: '请选择运算符号' }]"
              >
                <Select
                  allow-clear
                  style="width: 150px"
                  v-model:value="formState.cpuSymbol"
                  :options="thresholdOptions"
                  placeholder="请选择运算符号"
                />
              </FormItem>
            </Col>
            <Col :span="6">
              <FormItem
                class="flex"
                name="cpuRate"
                :rules="[{ required: true, message: '请输入阈值比例' }]"
              >
                <Input
                  style="width: 150px"
                  v-model:value="formState.cpuRate"
                  addonAfter="%"
                />
              </FormItem>
            </Col>
            <Col :span="6">
              <FormItem
                class="flex"
                name="cpuTime"
                :rules="[{ required: true, message: '请输入时长' }]"
              >
                <FormItemRest>
                  <div class="mr-4 flex">
                    <Input
                      v-model:value="formState.cpuTime"
                      style="width: 150px"
                    />
                    <Select
                      allow-clear
                      v-model:value="formState.cpuTimeUnit"
                      style="width: 70px"
                      :options="[
                        {
                          label: '分',
                          value: '2',
                        },
                        {
                          label: '小时',
                          value: '1',
                        },
                      ]"
                    />
                  </div>
                </FormItemRest>
              </FormItem>
            </Col>
            <Col :span="6">
              <FormItem
                style="display: inline-block"
                name="cpuAlarmCount"
                :rules="[{ required: true, message: '请输入告警次数' }]"
              >
                <Input
                  v-model:value="formState.cpuTime"
                  addonAfter="次"
                  style="width: 150px"
                />
              </FormItem>
            </Col>
          </Flex>
        </Row>
      </FormItemRest>
    </FormItem>
    <div class="mt-[-10px]">
      重复告警（告警项与告警等级相同）不再生成告警中心列表数据，若推送策略启用且不在静默周期内则推送告警消息
    </div>
    <FormItem label="告警静默">
      <FormItemRest>
        <Select
          allow-clear
          v-model:value="formState.silenceId"
          style="width: 70px"
          :options="[
            {
              label: '静默策略1',
              value: '2',
            },
            {
              label: '静默策略2',
              value: '1',
            },
          ]"
        />
        <Switch
          v-model:checked="formState.silenceEnable"
          :checked-value="0"
          :un-checked-value="1"
        ></Switch>
      </FormItemRest>
    </FormItem>
    <FormItem label="推送策略">
      <FormItemRest>
        <Select
          allow-clear
          v-model:value="formState.pushId"
          style="width: 70px"
          :options="[
            {
              label: '推送策略1',
              value: '2',
            },
            {
              label: '推送策略2',
              value: '1',
            },
          ]"
        />
        <Switch
          v-model:checked="formState.pushEnable"
          :checked-value="0"
          :un-checked-value="1"
        ></Switch>
        <div>
          <img src="/static/" alt="" />
          <div>
            告警静默管理用于您在系统维护期间或夜晚周末不想受到告警打扰时，设置指定时间段内屏蔽告警通知。
          </div>
        </div>
      </FormItemRest>
    </FormItem>
    <Divider />
    <FormItem label="是否启用" name="enable" class="flex justify-center">
      <Switch
        v-model:checked="formState.enable"
        :checked-value="0"
        :un-checked-value="1"
      ></Switch>
    </FormItem>
  </Form>
</template>

<script setup lang="tsx">
import {
  Col,
  Divider,
  Flex,
  Form,
  FormItem,
  FormItemRest,
  Input,
  Row,
  Select,
  Switch,
} from 'ant-design-vue';

defineProps({
  name: {
    type: String,
    default: '',
  },
});

const formState = defineModel<any>('value');

const thresholdOptions = [
  {
    label: '>',
    value: '>',
  },
  {
    label: '<',
    value: '<',
  },
  {
    label: '>=',
    value: '>=',
  },
  {
    label: '<=',
    value: '<=',
  },
  {
    label: '=',
    value: '=',
  },
];
</script>

<style lang="scss" scoped></style>
